<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="dark light">
    <title>Save plain text as you type</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
    <script src="../StreamSaver.js"></script>

    <p>1) Set a filename</p>
    <input type="text" id="$filename" value="sample.txt">

    <hr>

    <p>2) Write some data</p>

    <button id="$a">Write some aaa's</button>
    <button id="$b">Write some bbb's</button>
    <button id="$c">Write some ccc's</button>
    <button id="$ipsum">Write a lot of Lorem ipsum</button><br>
    <input type="text" id="$custom" placeholder="custom text">
      (may look like nothing is happening, but writes all keystorke to fileStream)

    <hr>

    <p>3) Abort for cancel, close for ending the write stream</p>
    <button disabled id="$abort">Abort</button>
    <button disabled id="$close">Close</button>

    <script>
      var Lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Pellentesque gravida condimentum metus et porttitor. Curabitur
      pharetra vestibulum egestas. Pellentesque quis tortor id ligula
      cursus luctus ac at nisi. Mauris rutrum mattis vulputate. Donec
      tempor eget lectus eu rhoncus. Etiam et auctor est. Aenean sem augue,
      consectetur et ipsum fringilla, rhoncus tincidunt sem. Duis vel
      rutrum lectus, non dui. Duis non urna non dolor elementum
      commodo. Praesent commodo maximus lobortis. Curabitur fringilla
      tellus`.replace(/\s\s+/g, ' ')

      var fileStream, writer
      var encode = TextEncoder.prototype.encode.bind(new TextEncoder)
      let text = encode((Lorem + "\n\n").repeat(2*1024)) // 1 MiB
      let a = new Uint8Array(1024).fill(97)
      let b = new Uint8Array(1024).fill(98)
      let c = new Uint8Array(1024).fill(99)

      // Abort the download stream when leaving the page
      window.isSecureContext && window.addEventListener('beforeunload', evt => {
        writer.abort()
      })

      $abort.onclick = () => {
        writer.abort()
        document.body.innerHTML = '<a href="./plain-text.html">Try again</a>'
      }

      $close.onclick = () => {
        writer.close()
        document.body.innerHTML = '<a href="./plain-text.html">Try again</a>'
      }

      $a.onclick = $b.onclick = $c.onclick = $ipsum.onclick = $custom.oninput = evt => {

        if (evt.target === $ipsum) {
          var n = ~~prompt("How many MiB of lorem ipsum text do you want?", '1024')
        }

        if (!fileStream) {
          fileStream = streamSaver.createWriteStream($filename.value || 'sample.txt')
          writer = fileStream.getWriter()
          $filename.disabled = true
          $abort.disabled = $close.disabled = false
        }


        var data

        if (evt.target === $a) data = a
        if (evt.target === $b) data = b
        if (evt.target === $c) data = c
        if (evt.target === $custom) data = encode($custom.value)

        $custom.value = ''

        data && writer.write(data)

        if (evt.target === $ipsum) {
          let que = Promise.resolve()
          let pump = () => {
            n-- && que.then(() => {
              writer.write(text).then(()=>{setTimeout(pump)})
            })
          }
          pump()
        }
      }
    </script>
  </body>
</html>
